<template>
  <div class="login">
    <div class="login-1">
      <h3>登录嗨购后台管理系统</h3>
      <p>
        账号:
        <input type="text" v-model="form.adminname" placeholder="请输入用户名" class="login-2"/>
      </p>
      
      <p>
        密码:
        <input type="password" v-model="form.password" placeholder="请输入密码" class="login-2"/>
      </p>

      <p>
        <input type="button" value="登录" @click="login" class="login-3" />
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import service from "../../utils/service";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const $router = useRouter();

interface ilogin {
  adminname: string;
  password: string;
}

const form = reactive<ilogin>({
  adminname: "",
  password: "",
});
const login = () => {
  service({
    url: "/admin/login",
    method: "post",
    data: {
      form,
    },
  }).then((res) => {
    if (!form.adminname && !form.password) {
      // ElMessage({
      //   message: "请输入用户名和密码",
      //   type: "warning",
      // });
    } else if (form.adminname == "admin" && form.password == "123456") {
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      localStorage.setItem("adminname", form.adminname);
      $router.push("/admin");
    } else if (form.password != "123456") {
      ElMessage({
        message: "密码错误",
        type: "error",
      });
    } else if (form.adminname != "admin") {
      ElMessage({
        message: "未注册",
        type: "warning",
      });
    }
  });
};
login();
</script>

<style scope>
.login {
  width: 100%;
  height: 100%;
  background: url("https://www.taizhou.gov.cn/taiqitong/img/bod.a9b05e84.png")
    no-repeat;
  position: relative;
}
.login .login-1 {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgb(158, 158, 187);
  opacity: 0.8;
  padding-top: 20px;
  border-radius: 10px;

}
.login input {
  margin-top: 20px;
}
.login-2{
  width: 200px;
  height: 26px;
  border-radius: 6px;
  border:none;

}
.login-3{
  width: 100px;
  height: 30px;
  border-radius: 15px;
  border:none;
}

</style>